<script setup lang="ts">

</script>

<template>
  <div ref="target" class="home-page">
    <div class="banner text-center">
      <p>首页标题</p>
    </div>
    <div class="flex justify-around">
      <el-card shadow="hover" style="width: 30%;">
        <h3>内容1</h3>
        <p>内容2</p>
        <template #footer>
          按钮
        </template>
      </el-card>
      <el-card shadow="hover" style="width: 30%;">
        <h3>内容1</h3>
        <p>内容2</p>
        <template #footer>
          按钮
        </template>
      </el-card>
      <el-card shadow="hover" style="width: 30%;">
        <h3>内容1</h3>
        <p>内容2</p>
        <template #footer>
          按钮
        </template>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss">
.home-page {
  width: 100%;
  .banner{
    font-size: 20px;
    font-weight: bold;
  }
}
</style>
